<template>
    <div 
        ref="color_taking_show"
        class="color_taking_show"
        v-show="show"
        :style="{
            top:offset_y+'px',
            left:offset_x+'px',
        }">
        <div class="container">
            <span 
                class="item" 
                v-for="(item,index) in 121" 
                :key="index"
                :class="{
                    item:true,
                    on_item:item == 61,
                }"
                :style="{
                    backgroundColor:'rgb('+color_list[index*4+0]+','+color_list[index*4+1]+','+color_list[index*4+2]+')',
                }">
            </span>
        </div>
        <div class="icon">
            <svg t="1604026908332" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4951" width="11" height="11"><path d="M512 1024C229.67 1024 0 794.33 0 512S229.67 0 512 0s512 229.67 512 512-229.67 512-512 512z m0-950.86C270.01 73.14 73.14 270.01 73.14 512S270.01 950.86 512 950.86 950.86 753.99 950.86 512 753.99 73.14 512 73.14z" p-id="4952" fill="#010a43"></path></svg>
        </div>
    </div>
</template>

<script>
export default {   //鼠标移动显示区域颜色展示
    name:"Color_taking_show",
    props:{
        show:{
            type:Boolean,
            default:false,
        },
        offset_x:{ //组件显示的坐标位置
            type:Number,
            default:0,
        },
        offset_y:{
            type:Number,
            default:0,
        },
        color_list:{ //一个色素值的数组
            type:Array,
            default:()=>{
                return [];
            },
        },
    },
}
</script>

<style scoped lang="scss">
.color_taking_show{
    position:absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    >.container{
        border: 2px solid #2b2e4a7e;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(11,1fr);
        grid-template-rows: repeat(11,1fr);
        z-index: 9999;
        grid-gap: 1px;
        background-color: rgb(129, 135, 155);
        >.item{
            width: 7px;
            height: 7px;
            box-sizing: border-box;
            background-color:white;
        }
        >.on_item{
            border: 1px solid #f73859;
        }
    }
    >.icon{
        position:absolute;
        top: 0;
        left: 0;
        height: 11px;
        width: 11px;
        display: flex;
    }
}
</style>
